<template>
  <div class="container">
    <el-descriptions :column="4">
      <el-descriptions-item label="【题型】">{{
        testList.questionType | questionType1
      }}</el-descriptions-item>
      <el-descriptions-item label="【编码】">{{
        testList.id
      }}</el-descriptions-item>
      <el-descriptions-item label="【难度】">{{
        testList.difficulty | difficulty
      }}</el-descriptions-item>

      <el-descriptions-item label="【标签】">{{
        testList.tags
      }}</el-descriptions-item>
      <!-- {{testList.difficulty}} -->
      <el-descriptions-item label="【学科】">{{
        testList.subjectName
      }}</el-descriptions-item>
      <el-descriptions-item label="【目录】">{{
        testList.directoryName
      }}</el-descriptions-item>
      <el-descriptions-item label="【方向】">{{
        testList.direction
      }}</el-descriptions-item>
    </el-descriptions>
    <hr />
    <el-descriptions direction="vertical" :column="1">
      <el-descriptions-item label="【题干】">
        <div style="color: blue" v-html="testList.question"></div>

        <p>
          {{
            testList.questionType === "1"
              ? "选项：（以下选中的选项为正确答案）"
              : "多选题 选项：（以下选中的选项为正确答案）"
          }}
        </p>
        <!-- 单选框显示 -->
        <div v-if="testList.questionType === '1'">
          <div>
            <el-radio
              v-model="radio"
              :label="testList.options[0].isRight"
              onclick="return false;"
              >{{ testList.options[0].title }}</el-radio
            >
          </div>
          <div>
            <el-radio
              v-model="radio"
              :label="testList.options[1].isRight"
              onclick="return false;"
              >{{ testList.options[1].title }}</el-radio
            >
          </div>
          <div>
            <el-radio
              v-model="radio"
              :label="testList.options[2].isRight"
              onclick="return false;"
              >{{ testList.options[2].title }}</el-radio
            >
          </div>
          <div>
            <el-radio
              v-model="radio"
              :label="testList.options[3].isRight"
              onclick="return false;"
              >{{ testList.options[3].title }}</el-radio
            >
          </div>
        </div>
        <!-- 多选框 -->
        <div v-if="testList.questionType === '2'">
          <el-checkbox-group v-model="checkList">
            <div>
              <el-checkbox
                :label="testList.options[0].isRight"
                onclick="return false;"
                >{{ testList.options[0].title }}
              </el-checkbox>
            </div>
            <div>
              <el-checkbox
                :label="testList.options[1].isRight"
                onclick="return false;"
                >{{ testList.options[1].title }}</el-checkbox
              >
            </div>
            <div>
              <el-checkbox
                :label="testList.options[2].isRight"
                onclick="return false;"
                >{{ testList.options[2].title }}</el-checkbox
              >
            </div>
            <div>
              <el-checkbox
                :label="testList.options[3].isRight"
                onclick="return false;"
                >{{ testList.options[3].title }}</el-checkbox
              >
            </div>
            <div>
              <el-checkbox :label="testList.options[4].isRight">{{
                testList.options[4].title
              }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <hr />
    <el-descriptions :column="1">
      <el-descriptions-item label="【参考答案】">
        <el-button type="danger" size="mini" @click="isVideo = true"
          >视频答案预览</el-button
        >
        <div>
          <video
            v-if="isVideo"
            :src="testList.videoURL"
            controls="controls"
            autoplay="autoplay"
            class="video"
          ></video>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <hr />
    <el-descriptions :column="1">
      <el-descriptions-item label="【答案解析】">
        <div v-html="testList.answer"></div>
        <!-- {{testList.answer}} -->
      </el-descriptions-item>
    </el-descriptions>
    <hr />
    <el-descriptions :column="1">
      <el-descriptions-item label="【题目备注】">
        {{ testList.remarks }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- <hr/> -->
    <el-button type="primary" style="float: right" @click="$emit('close')"
      >关闭</el-button
    >
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      radio: 1,
      checkList: [1],
      isVideo: false
    }
  },
  // 过滤器
  filters: {
    // 【题型】过滤器
    questionType1 (val) {
      if (val === '1') {
        return '单选'
      } else if (val === '2') {
        return '多选'
      } else if (val === '3') {
        return '简答'
      }
    },
    // 【难度】过滤器
    difficulty (val) {
      if (val === 1) {
        return '简单'
      } else if (val === 2) {
        return '一般'
      } else {
        return '困难'
      }
    }
  },
  props: {
    testList: {
      type: Object,
      required: true
    }
  }

}
</script>

<style scoped >
.container {
  margin-bottom: 30px;
}
p {
  margin-top: 0px;
}
.video {
  width: 400px;
  height: 300px;
}
</style>
